<template>
  <el-row :gutter="10" class="serverContentRow" type="flex">
    <el-col :span="4" :xl="3" class="textServerBox" style="display: none">
      <div class="gradientBox">
        <p class="titleText">数据库实例</p>
        <div class="showTextBtnBox">
          <i
            class="el-icon-s-grid"
            :class="{ showMode: showTextMode == 'icon' }"
            @click="showText('icon')"
          ></i>
          <i
            class="el-icon-more"
            :class="{ showMode: showTextMode == 'text' }"
            @click="showText('text')"
          ></i>
        </div>
        <v-TextServer @clickMonID="getClickMonID"></v-TextServer>
      </div>
    </el-col>
    <el-col :span="24" :xl="24" class="mainBox">
      <el-row :gutter="10" class="leftRow">
        <el-col :span="6" class="leftRow-twoBox">
          <div class="gradientBox">
            <p class="titleText">基本信息</p>
            <v-SerBasicInformation></v-SerBasicInformation>
          </div>
          <div class="gradientBox">
            <p class="titleText">状态信息</p>
            <v-StateInformation></v-StateInformation>
          </div>
        </el-col>
        <el-col :span="18" class="rightRow">
          <el-row :gutter="10" class="serverTopRow">
            <el-col :span="12" class="serverTopRow-threeBox">
              <div class="gradientBox">
                <p class="titleText">cpu/内存</p>
                <v-CpuIoLoad></v-CpuIoLoad>
              </div>

              <div class="gradientBox">
                <p class="titleText">IO</p>
                <v-NetLoad></v-NetLoad>
              </div>

              <div class="gradientBox">
                <p class="titleText">日志空间使用率</p>
                <v-SqlSpace></v-SqlSpace>
              </div>
            </el-col>
            <el-col :span="12" class="serverTopRow-threeBox">
              <div class="gradientBox">
                <p class="titleText">逻辑读top5</p>
                <v-CpuLoad pageType="logic"></v-CpuLoad>
              </div>
              <div class="gradientBox">
                <p class="titleText">物理读top5</p>

                <v-CpuLoad pageType="physical"></v-CpuLoad>
              </div>
              <div class="gradientBox">
                <p class="titleText">文件系统信息</p>

                <v-ServerFileSystemImfor></v-ServerFileSystemImfor>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="serverDownRow">
            <el-col :span="24" class="serverDownRow-oneBox">
              <div class="gradientBox">
                <p class="titleText">告警日志</p>
                <v-ServerAlarmLog></v-ServerAlarmLog>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import vTextServer from "./TextServer.vue";
import vCpuLoad from "./CpuLoad.vue";
import vCpuIoLoad from "./CpuAndIoLoad.vue";

import vServerMemoryLoad from "./ServerMemoryLoad.vue";
import vIoLoad from "./IoLoad.vue";
import vNetLoad from "./NetLoad.vue";
import vServerFileSystemImfor from "./ServerFileSystemImfor.vue";
import vSqlSpace from "./SqlSpace.vue";
import vServerAlarmLog from "./ServerAlarmLog.vue";
import vSerBasicInformation from "./SerBasicInformation.vue";
import vStateInformation from "./StateInformation.vue";
import vDatabaseSize from "./DatabaseSize.vue";

export default {
  name: "serverPage",
  components: {
    vTextServer,
    vCpuLoad,
    vServerMemoryLoad,
    vIoLoad,
    vNetLoad,
    vServerFileSystemImfor,
    vServerAlarmLog,
    vSerBasicInformation,
    vStateInformation,
    vDatabaseSize,
    vCpuIoLoad,
    vSqlSpace,
  },
  beforeRouteEnter(to, from, next) {
    // if (from.path != "/NodeUsability") {
    //   next("/NodeUsability");
    // }
    next();
  },
  data() {
    return {
      selectedMonID: {},
      showTextMode: "icon",
    };
  },
  created() {},
  methods: {
    getClickMonID(val) {
      this.selectedMonID = val;
      // console.log(this.selectedMonID)
      bus.$emit("selectedMonIDSqlServer", this.selectedMonID);
    },
    showText(val) {
      switch (val) {
        case "icon":
          this.showTextMode = "icon";
          bus.$emit("showText", "icon");
          break;
        case "text":
          this.showTextMode = "text";
          bus.$emit("showText", "text");
          break;

        default:
          break;
      }
    },
  },
  beforeDestroy() {
    //   bus.$off('selectedMonIDSqlServer')
    
  },
};
</script>

<style scoped>
.serverContentRow {
  height: 100%;
  color: aliceblue;
  min-height: 896px;
  overflow-y: scroll;
}
.titleText {
  width: 60%;
  margin: 0 auto 8px auto;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
  line-height: 22px;
}
.showTextBtnBox {
  position: absolute;
  top: 10px;
  right: 0;
  padding-right: 3px;
}
.showTextBtnBox i {
  margin-right: 3px;
  cursor: pointer;
}
.showTextBtnBox i.showMode {
  color: #67c23a;
}
.gradientBox {
  position: relative;
  padding: 7px 10px;
  margin-bottom: 10px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 24px rgb(1, 40, 107) inset !important;
}
.gradientBox:last-child {
  margin-bottom: 0;
}
/* 服务器列表 */
.textServerBox .gradientBox {
  max-height: calc(100% - 7px * 2);
}
.mainBox .leftRow {
  height: 100%;
}
.leftRow .rightRow {
  height: 100%;
}
.leftRow > div {
  height: 100%;
}
.serverTopRow > div {
  height: 100%;
}
.rightRow .serverTopRow {
  height: 80%;
  /* margin-bottom: 10px; */
}
.rightRow .serverDownRow {
  height: calc(20% - 10px) !important;
}
/* CPU、内存、交换空间 */
.serverTopRow-threeBox .gradientBox {
  height: calc(100% / 3 - 6px * 3 - 20px / 3);
}
/* 网络负载、文件系统信息 */
.serverTopRow-twoBox .gradientBox {
  height: calc(100% / 2 - 7px * 2 - 20px / 2);
}

/* 右下角告警日志 */
.serverDownRow > div {
  height: 100%;
}
.serverDownRow-oneBox .gradientBox {
  height: calc(100% - 7px * 2);
}

/* 基本信息与状态信息 */
.leftRow-twoBox .gradientBox {
  height: calc(100% / 2 - 7px * 2 - 20px / 2);
}
</style>
